<script setup lang="ts">
import {useRouter} from "vue-router";
import type {SlideButton, SlideButtonGroup} from "@/typex/modules/ui/tab-buttonx.ts";
import {useI18n} from "vue-i18n";

const {t, locale} = useI18n();
let router = useRouter()
const ToHandle = (item: SlideButton) => {
    // router.push(item.path)
    props.handel(item.path)
}
const props = defineProps({
    buttons: {
        type: Array<SlideButtonGroup> || [],
        required: true
    },
    handel: {
        type: Function,
        required: true
    }
})

</script>
<template lang="pug">
h4(v-for="(item,index) in props.buttons" )
    h4 {{ $t(item.name) }}
    li(v-for="(itemx,indexx) in item.children" )
        .icon_button
            i.icon(:class="itemx.icon")
            span(@click="ToHandle(itemx)") {{ $t(itemx.name) }}
</template>

<style scoped lang="scss">
.icon_button {
    display: flex;
    padding: 0px 10px 10px 15px;
    border-radius: 8px;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    cursor: pointer;
    height: 23px;
}

.icon {
    position: relative;
    align-items: center;
    height: 23px;
    margin-top: 10px;
    padding: 2px 2px 2px 2px;
}

</style>